<template>
	<div ref="chart" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
	name: 'line',
	created() {},
	mounted() {
		// const myChart = echarts.init(this.$refs.chart);
		// window.addEventListener('resize', function () {
		// 	myChart.resize();
		// });
		this.initChart();
	},
	data() {
		return {
			// 统计命令信息
			commandstats: null,
		};
	},
	methods: {
		initChart() {
			var dataArr = [
				{
					value: 1000,
					name: '总用户数',
				},
			];
			var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
				{
					offset: 0,
					color: '#5CF9FE', // 0% 处的颜色
				},
				{
					offset: 0.17,
					color: '#468EFD', // 100% 处的颜色
				},
				{
					offset: 0.9,
					color: '#468EFD', // 100% 处的颜色
				},
				{
					offset: 1,
					color: '#5CF9FE', // 100% 处的颜色
				},
			]);
			var colorSet = [
				[0.91, color],
				[1, '#15337C'],
			];
			var rich = {
				white: {
					fontSize: 30,
					color: '#fff',
					fontWeight: '500',
					padding: [-150, 0, 0, 0],
				},
				bule: {
					fontSize: 45,
					fontFamily: 'DINBold',
					color: '#fff',
					fontWeight: '500',
					padding: [0, 0, 0, 0],
				},
				radius: {
					width: 350,
					height: 80,
					// lineHeight:80,
					borderWidth: 1,
					fontSize: 20,
					color: '#fff',
					padding: [-20, 0, 0, 0],
					// backgroundColor: '#1B215B',
					borderRadius: 20,
					textAlign: 'center',
				},
				size: {
					height: 400,
					padding: [100, 0, 0, 0],
				},
			};
			const option = {
				// backgroundColor: '#0E1327',
				tooltip: {
					formatter: '{a} <br/>{b} : {c}%',
				},

				series: [
					{
						//内圆
						type: 'pie',
						radius: '100%',
						center: ['50%', '50%'],
						z: 0,
						itemStyle: {
							normal: {
								color: new echarts.graphic.RadialGradient(
									0.5,
									0.5,
									1,
									[
										{
											offset: 0,
											color: 'rgba(17,24,43,0)',
										},
										{
											offset: 0.5,
											// color: '#1E2B57'
											color: 'rgba(28,42,91,.6)',
										},
										{
											offset: 1,
											color: '#141C33',
											// color:'rgba(17,24,43,0)'
										},
									],
									false
								),
								label: {
									show: false,
								},
								labelLine: {
									show: false,
								},
							},
						},
						hoverAnimation: false,
						label: {
							show: false,
						},
						tooltip: {
							show: false,
						},
						data: [100],
					},
					{
						//内圆
						type: 'pie',
						radius: '85%',
						center: ['50%', '50%'],
						z: 0,
						itemStyle: {
							normal: {
								color: new echarts.graphic.RadialGradient(
									0.5,
									0.5,
									1,
									[
										{
											offset: 0,
											color: 'rgba(17,24,43,0)',
										},
										{
											offset: 0.5,
											// color: '#1E2B57'
											color: 'rgba(28,42,91,.6)',
										},
										{
											offset: 1,
											color: '#141C33',
											// color:'rgba(17,24,43,0)'
										},
									],
									false
								),
								label: {
									show: false,
								},
								labelLine: {
									show: false,
								},
							},
						},
						hoverAnimation: false,
						label: {
							show: false,
						},
						tooltip: {
							show: false,
						},
						data: [100],
					},
					{
						//内圆
						type: 'pie',
						radius: '75%',
						center: ['50%', '50%'],
						z: 0,
						itemStyle: {
							normal: {
								color: new echarts.graphic.RadialGradient(
									0.5,
									0.5,
									1,
									[
										{
											offset: 0,
											color: 'rgba(17,24,43,0)',
										},
										{
											offset: 0.5,
											// color: '#1E2B57'
											color: 'rgba(28,42,91,.6)',
										},
										{
											offset: 1,
											color: '#141C33',
											// color:'rgba(17,24,43,0)'
										},
									],
									false
								),
								label: {
									show: false,
								},
								labelLine: {
									show: false,
								},
							},
						},
						hoverAnimation: false,
						label: {
							show: false,
						},
						tooltip: {
							show: true,
						},
						data: [1000],
					},

					{
						type: 'gauge',
						radius: '45%',
						startAngle: '225',
						endAngle: '-45',

						pointer: {
							show: false,
						},
						detail: {
							formatter: function (value) {
								var num = Math.round(value);
								return '{radius|总用户数(万)}\n{bule|' + num + '}' + '{size|' + '}';
							},
							rich: rich,
							offsetCenter: ['0%', '0%'],
						},
						data: dataArr,
						title: {
							show: false,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: colorSet,
								width: 20,
								shadowBlur: 10,
								shadowColor: '#B0C4DE',
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								borderRadius: 20,
								opacity: 1,
							},
							roundCap: true,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
							length: 25,
							lineStyle: {
								color: '#00377a',
								width: 2,
								type: 'solid',
							},
						},
						axisLabel: {
							show: false,
						},
					},
					{
						name: '灰色内圈', //刻度背景
						type: 'gauge',
						z: 2,
						radius: '71%',
						startAngle: '225',
						endAngle: '-45',
						// center: ["50%", "75%"], //整体的位置设置
						axisLine: {
							// 坐标轴线
							lineStyle: {
								// 属性lineStyle控制线条样式
								color: [[10, '#018DFF']],
								width: 0,
								opacity: 100, //刻度背景宽度
							},
						},
						splitLine: {
							show: true,
							length: 10, //刻度节点线长度

							lineStyle: {
								width: 2,
								color: '#018DFF',
								left: 10,
							}, //刻度节点线
						},
						axisLabel: {
							show: true,
							color: 'rgba(255,255,255,1)',
							fontSize: 14,
						},
						pointer: {
							show: true,
						},
						axisTick: {
							show: true,
							lineStyle: {
								color: '#018DFF',
								width: 1,
							},
						},
						detail: {
							show: true,
						},
					},
					{
						name: '白色圈刻度',
						type: 'gauge',
						radius: '75%',
						startAngle: 225, //刻度起始
						endAngle: -45, //刻度结束
						z: 4,
						axisTick: {
							show: false,
						},
						splitLine: {
							show: true,
							length: 10, //刻度节点线长度
							lineStyle: {
								width: 2,
								color: '#018DFF',
							}, //刻度节点线
						},
						axisLabel: {
							color: 'rgba(255,255,255,0)',
							fontSize: 12,
						}, //刻度节点文字颜色
						pointer: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								opacity: 0,
							},
						},
						detail: {
							show: false,
						},
						data: [
							{
								value: 0,
								name: '',
							},
						],
					},
					{
						//内圆
						type: 'pie',
						radius: '44%',
						center: ['50%', '50%'],
						z: 1,
						itemStyle: {
							normal: {
								color: new echarts.graphic.RadialGradient(
									0.5,
									0.5,
									0.8,
									[
										{
											offset: 0,
											color: '#4978EC',
										},
										{
											offset: 0.5,
											color: '#1E2B57',
										},
										{
											offset: 1,
											color: '#141F3D',
										},
									],
									false
								),
								label: {
									show: false,
								},
								labelLine: {
									show: false,
								},
							},
						},
						hoverAnimation: false,
						label: {
							show: false,
						},
						tooltip: {
							show: false,
						},
						data: [100],
					},
				],
			};
			const chartDom = this.$refs.chart;
			this.commandstats = echarts.init(chartDom, 'macarons');
			this.commandstats.setOption(option);
		},
	},
};
</script>
<style scoped lang="scss">
.mapDom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.echarts {
	display: flex;
	align-items: center;

	.echartsLeft {
		width: auto;
		background-image: linear-gradient((#063053, 0.3), (#395873, 0.3), (#5c7c99.3));
	}

	.echartsRight {
		width: auto;
		background-color: #000;
	}

	.echartsCenter {
		flex: 1;
		background-color: #000;
	}
}
</style>
